<template>
	<view class="archList">
		<navBar isBack backColor="#fff" title="档案留存" color="#fff" background="transparent"></navBar>
		<view class="aS_topImg">
			<image src="https://manager.ryz1620.com/static/distri/makerCenter/bg.png" mode=""></image>
		</view>
		<!-- 档案列表 -->
		<view class="list" v-if="cateList.length" :style="'margin-top:'+navHeight+'rpx;'">
			<view class="item" v-for="(item,index) in cateList" :key="index" @click="toArchDetail(item.id,item.name)">
				<view class="itemLeft">
					<image :src="`${baseImg}/static/constr/folder.png`" mode=""></image>
					{{item.name}}
				</view>
				<checkbox-group v-if="power" name="" @change.stop="toChange(item.checked,index)">
					<checkbox :checked="item.checked" />
				</checkbox-group>
			</view>
		</view>
		
		<!-- 没有数据 -->
		<view class="notList" v-else>
				<image src="https://manager.ryz1620.com/static/constr/notList.png" mode=""></image>
				空空如也
		</view>
		
		
		<!-- 添加按钮 -->
		<view class="btn">
			<view class="btnLeft" v-if="cateList.length" @click="toPower">
				<view class="img">
					<i class="iconfont" v-if="!power">&#xe61d;</i>
					<i class="iconfont" v-else>&#xe8ad;</i>
					<!-- <image :src="`${baseImg}/static/constr/storage.png`" mode=""></image> -->
				</view>
				{{power?'完成':'管理'}}
			</view>
			<view  v-if="!power" class="btnAuto">
				<button class="addBtn" type="default" @click="submitFN">添加分组</button>
			</view>
			<view class="btn2" v-else>
				<button type="default" @click="resetName">重命名</button>
				<button class="delBtn" type="default" @click="toDelCate">确认删除</button>
			</view>
		</view>
		<u-popup v-model="show" mode="center" border-radius="8" class="pop">
			<view class="popBox">
				<h3>{{text}}</h3>
				<view class="ipt">
					<input type="text" v-model="cateName" value="" placeholder="请输入分类名" />
				</view>
				<view class="popBtn">
					<button type="default" @click="toClose">取消</button>
					<button class="btn2" type="default" @click="toAdd">确认</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import service_constr from '@/service/constr.js'
	export default{
		data(){
			return{
				baseImg:this.$static,
				navHeight:0,
				show:false,
				cateName:'',
				cateList:[],
				power:false,
				order_id:null,
				resetOpen:false,
				arr:[], //选中的项
				text:'添加档案分类',
			}
		},
		onLoad(options) {
			this.order_id = options.order_id
			this.navHeight = 192 - Number(this.$store.state.system.navBarHeight)*2
			this.getList()
		},
		onShow() {
			this.getList()
		},
		methods:{
			// 获取列表
			getList(){
				uni.showLoading({
					title:'加载中'
				})
				service_constr.getCateLog({order_id:this.order_id}).then(res=>{
					if(res.code==1){
						res.data.map(item=>{
							item.checked = false
						})
						this.cateList = res.data?res.data:[]
					}else{
						this.cateList = []
					}
				})
				setTimeout(function(){
					uni.hideLoading()
				},500)
			},
			
			// 添加分组
			submitFN(){
				this.show = true
				this.text = '添加档案分类'
			},
			
			// 关闭弹框
			toClose(){
				this.show = false;
				this.resetOpen = false
			},
			
			// 选择
			toChange(check,index){
				if(check){
					this.cateList[index].checked = false
				}else{
					this.cateList[index].checked = true
				}
				console.log(this.cateList)
			},
			
			// 管理按钮
			toPower(){
				if(this.power){
					this.power = false
				}else{
					this.power = true
				}
			},
			
			// 添加确定
			toAdd(){
				if(this.resetOpen){ //重命名
					let params={
						id:this.arr[0].id,
						name:this.cateName
					}
					service_constr.resetName(params).then(res=>{
						if(res.code==1){
							uni.showToast({
								title:'修改成功',
								icon:'success'
							});
							this.resetOpen = false
							this.cateName = ''
							this.show = false
							this.arr = []
							this.getList()
						}
					})
				}else{
					
					console.log(this.order_id)
					console.log(this.cateName)
					service_constr.toAdd({order_id:this.order_id,name:this.cateName}).then(res=>{
						console.log(res)
						if(res.code==1){
							uni.showToast({
								title:'添加成功',
								icon:'success'
							})
							this.getList()
							this.cateName=''
							this.show = false
						}
					})
				}
			},
			
			// 重命名
			resetName(){
				this.cateList.map((item)=>{
					if(item.checked){
						this.arr.push(item)
					}
				})
				console.log(this.arr)
				if(!this.arr.length){
					uni.showToast({
						title:'请选择需要重命名的分类',
						icon:'none'
					})
					return
				}else if(this.arr.length>1){
					uni.showToast({
						title:'只能选择一项重命名',
						icon:'none'
					})
					this.arr=[]
					return
				}else{
					this.text = '重命名'
					this.resetOpen = true
					this.show = true
					this.cateName = this.arr[0].name
				}
				
			},
			
			// 删除按钮
			toDelCate(){
				let delArr = []
				this.cateList.map(item=>{
					if(item.checked){
						delArr.push(item.id)
					}
				})
				if(!delArr.length){
					uni.showToast({
						title:'请选择要删除的项',
						icon:'none'
					})
					return
				}else{
					uni.showModal({
						title:'提示',
						content:'确定要删除所选项吗？',
						success:res=>{
							if(res.confirm){
								let id = delArr.join(',')
								service_constr.delCate({id}).then(res=>{
									if(res.code==1){
										uni.showToast({
											title:'删除成功',
											icon:'success'
										});
										this.getList()
									}
								})
							}
						}
					})
				}
			},
			// 进入档案详情
			toArchDetail(id,name){
				uni.navigateTo({
					url:`./archDetail?id=${id}&name=${name}&order_id=${this.order_id}`
				})
			},
			
		}
	}
</script>

<style lang="scss">
	@import '../iconfont.css';
	// page{height: 100%;}
	.archList{
		width: 100%;
		// height: 100%;
		// background-color: #fff;
		.aS_topImg{width: 100%;height: 192rpx;position: absolute;top: 0;left: 0;z-index: 0;image{width: 100%;height: 100%;}}
		.list{
			padding: 40rpx 24rpx 0;
			margin-bottom: 100rpx;
			padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
			padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/
			.item{
				display: flex;
				width: 702rpx;
				padding: 0 24rpx;
				height: 100rpx;
				align-items: center;
				border-radius: 16rpx;
				margin: 0 auto 40rpx;
				justify-content: space-between;
				background-color: #fff;
				.itemLeft{
					image{width: 44rpx;height: 44rpx;margin-right: 16rpx;}
					display: flex;
					align-items: center;
					font: 500 30rpx/40rpx PingFang SC;
					color: #0A0605;
				}
				checkbox{
					transform: scale(0.8);
				}
			}
		}
		
		// 没有数据
		.notList{
			width: 430rpx;
			height: 350rpx;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			bottom: 0;
			margin: auto;
			display: flex;
			flex-direction: column;
			align-items: center;
			image{width: 430rpx;height: 300rpx;margin-bottom: 40rpx;}
			font: bold 28rpx/40rpx PingFang SC;
			color: #939393;
		}
		
		// 添加按钮
		.btn{
			position: fixed;
			left: 0;
			bottom: 0;
			background-color: #fff;
			width: 100%;
			height: 100rpx;
			display: flex;
			padding: 0rpx 24rpx;
			align-items: center;
			justify-content: space-between;
			height: calc(100rpx+ constant(safe-area-inset-bottom));///兼容 IOS<11.2/
			height: calc(100rpx + env(safe-area-inset-bottom));///兼容 IOS>11.2/
			padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
			padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/
			.btnLeft{
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-right: 44rpx;
				font: 400 18rpx/20rpx PingFang SC;
				color: #A0A0A0;
				.img{
					width: 48rpx;
					height: 48rpx;
					line-height: 48rpx;
					border-radius: 50%;
					margin-bottom: 6rpx;
					background-color: #F5F5F5;
					text-align: center;
					i{font-size: 30rpx;color: #0A0605;}
				}
			}
			.btnAuto{
					margin: 10rpx auto;
				.addBtn{
					width: 606rpx;
					height: 80rpx;
					background-image: linear-gradient(86deg, #DBA954 0%, #EABA6A 100%);
					box-shadow: 0px 6rpx 12rpx rgba(219, 169, 84, 0.3);
					border-radius: 46rpx;
					font: 500 32rpx/80rpx PingFang SC;
					color: #fff;
				}
			}
			.btn2{
				display: flex;
				button{
					width: 288rpx;
					height: 80rpx;
					border-radius: 46rpx;
					background-color: #fff;
					border: 2rpx solid #DBA954;
					font: 500 32rpx/80rpx PingFang SC;
					color: #DBA954;
				}
				.delBtn{
					color: #fff;
					margin-left: 30rpx;
					background-image: linear-gradient(86deg, #DBA954 0%, #EABA6A 100%);
				}
			}
		}
		
		// 弹框
		.pop{
			.popBox{
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				width: 528rpx;
				height: 334rpx;
				padding: 40rpx 48rpx 28rpx 48rpx;
				h3{font: 600 30rpx/40rpx PingFang SC;color: #292A2B;}
				.ipt{
					padding: 24rpx 4rpx;
					border-bottom: 2rpx solid #D8D8D8;
				}
				.popBtn{
					display: flex;
					justify-content: space-between;
					button{
						width: 196rpx;
						height: 64rpx;
						border-radius: 32rpx;
						background-color: #F5F5F5;
						font: 400 26rpx/64rpx PingFang SC;
						color: #0A0605;
					}
					.btn2{
						background-color: #EBB964;
						color: #fff;
					}
				}
			}
		}
	}
</style>
